<template>
  <div class="no-data">
    <div class="no-data-item">
      <span class="no-data-title">默认</span>
      <pro-no-data style="margin-top: 10px" />
    </div>
    <div class="no-data-item">
      <span class="no-data-title">自定义</span>
      <pro-no-data style="margin-top: 10px">
        <template #icon>
          <img :src="svg" alt="" style="width: 100%; height: 100%" />
        </template>
        <template #extra> 额外内容 </template>
        <template #default> 描述信息：自定义图标 </template>
      </pro-no-data>
    </div>
  </div>
</template>

<script lang="ts" setup name="noData">
  import svg from '@/assets/colourSvg/404.svg'
</script>

<style lang="less" scoped>
  .no-data {
    display: flex;
    // flex-direction: column;
    justify-content: center;
    > div {
      margin-right: 10px;
    }
    .no-data-item {
      text-align: center;
      font-size: 18px;
      .no-data-title {
        margin-bottom: 10px;
      }
    }
  }
</style>
